@extends('layout.master')

@section('content-header')
    <h1>Notifikasi Kipem</h1>
    <ol class="breadcrumb">
        <li><a href="/"><i class="fa fa-dashboard"></i> Dashboard</a></li>
        <li class="active"><i class="fa fa-bell"></i> Notifikasi Kipem</li>
    </ol>
@stop

@section('content')
<div class="row">
    <div class="col-xs-12">

        <!-- Custom Tabs (Pulled to the right) -->
        <div class="nav-tabs-custom">
            <ul class="nav nav-tabs pull-right">
                <li><a href="{{ URL::route('kipems.notif') }}">Normal</a></li>
                <li class="active"><a href="{{ URL::route('kipems.notif.map') }}">Peta</a></li>
            </ul>
            <div class="tab-content">

                <div class="row">
                    <div id="box-filter" class="col-md-12 nopadding">
                        <form id="frmFilter">

                            <ul class="list-unstyled clearfix">
                                <li class="col-xs-3">
                                    Nama Lokasi
                                    <input type="text" id="fl_nama_lokasi" name="fl_nama_lokasi" class="form-control input-sm" placeholder="Nama Lokasi"/>
                                </li>
                                <li class="col-xs-3">
                                    Tipe Lokasi
                                    <select id="fl_tipe" name="fl_tipe" class="form-control input-sm">
                                        <option value="">Semua Tipe</option>
                                        @foreach($tipes as $tipe)
                                        <option value="{{ $tipe->id }}">{{ $tipe->nama; }}</option>
                                        @endforeach
                                    </select>
                                </li>
                            </ul>

                            <ul class="list-unstyled clearfix">
                                <li class="col-xs-3">
                                    <div class="input-group">
                                        <div class="input-group-addon"><input type="checkbox" id="fl_kipem_akan_habis" name="fl_kipem_akan_habis" class="input-sm"></div>
                                        <label for="fl_kipem_akan_habis" class="form-control label-filter input-sm">Kipem akan habis</label>
                                    </div>
                                </li>
                                <li class="col-xs-3">
                                    <div class="input-group">
                                        <div class="input-group-addon"><input type="checkbox" id="fl_kipem_habis" name="fl_kipem_habis" class="input-sm"></div>
                                        <label for="fl_kipem_habis" class="form-control label-filter input-sm">Kipem habis</label>
                                    </div>
                                </li>
                                <li class="col-xs-3">
                                    <div class="input-group">
                                        <div class="input-group-addon"><input type="checkbox" id="fl_kipem_sudah_habis" name="fl_kipem_sudah_habis" class="input-sm"></div>
                                        <label for="fl_kipem_sudah_habis" class="form-control label-filter input-sm">Kipem sudah habis</label>
                                    </div>
                                </li>
                                <li class="sc-button">
                                    <button class="btn btn-primary btn-sm" type="submit"><i class="fa fa-search"></i> Cari</a></button>
                                </li>
                            </ul>
                        </form>
                    </div>
                </div>

                <div class="row">

                    <div class="col-xs-6">

                        <div id="map_result">

                        </div>

                    </div>
                    <div class="col-xs-6">

                        <div id="map_canvas"></div>
                        <input type="text" id="latFld" class="hidden" value="{{ isset($lat_lng[0]) ? $lat_lng[0] : '-8.65000';  }}">
                        <input type="text" id="lngFld" class="hidden" value="{{ isset($lat_lng[1]) ? $lat_lng[1] : '115.21667';  }}">

                    </div>

                </div>

            </div><!-- /.tab-content -->
        </div><!-- nav-tabs-custom -->
    </div>
</div>
@stop

@section('javascript')
<script type="text/javascript">
    // global vars
    var add_marker    = false;
    var map;
    var markersArray  = [];
    var polygonCoords = [];
    var infowindow    = null;

    function markerClick(index) {
        console.log(index);
    }

    function showLoadIndicator(container) {
        var string = '<center style="padding-top: 30%;">';
        string += '<i class="fa fa-refresh fa-spin fa-2x"></i>';
        string += '</center>';

        $(container).html(string);
    }

    function reloadLocationLists(lokasis) {
        showLoadIndicator($('#map_result'));

        setTimeout(function(){
            var string  = '<ul class="list-group">';
            var counter = 0;
            lokasis.forEach(function(lokasi){
                string += '<a href="#" class="list-group-item" data-counter="'+ counter +'">'+ lokasi.nama +'</a>';
                counter++;
            });
            string += '</ul>';

            $('#map_result').html(string);
        },500);
    }

    // Deletes all markers in the array by removing references to them
    function deleteOverlays() {
        if (markersArray) {
            for (i in markersArray) {
                markersArray[i].setMap(null);
            }
            markersArray.length = 0;
        }
    }

    function placeMarker(lokasis) {
        deleteOverlays();

        lokasis.forEach(function(lokasi) {
            // var marker = new MarkerWithLabel({
            //     position: new google.maps.LatLng(lokasi.lat_lng[0], lokasi.lat_lng[1]),
            //     draggable: false,
            //     map: map,
            //     labelContent: lokasi.nama,
            //     labelAnchor: new google.maps.Point(0, 0),
            //     labelClass: "label label-primary label-googlemap", // the CSS class for the label
            //     labelStyle: {opacity: 0.75}
            // });

            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(lokasi.lat_lng[0], lokasi.lat_lng[1]),
                draggable: false,
                map: map
            });

            // add marker in markers array
            markersArray.push(marker);

            google.maps.event.addListener(marker, 'click', function () {
                var current = this;
                var promise = $.ajax({
                    url: "{{ URL::route('lokasis.get.marker.infowindow') }}",
                    type: 'get',
                    data: {
                        id: lokasi.id
                    }
                });

                promise.done(function(data){
                    infowindow.setContent(data);
                    infowindow.open(map, current);
                });
            });
        });

        reloadLocationLists(lokasis);
    }

    function initialize() {
        var lat = $('#latFld').val();
        var lng = $('#lngFld').val();

        var map_canvas = document.getElementById('map_canvas');
        var map_options = {
            center: new google.maps.LatLng(lat, lng),
            zoom: {{ isset($lingkungan['zoom']) ? $lingkungan['zoom'] : '18';  }},
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        map = new google.maps.Map(map_canvas, map_options);

        infowindow = new google.maps.InfoWindow({
            content: "<div class='text-center'><i class='fa fa-repeat fa-spin fa-2x'></i></div>"
        });

        // get polygon data
        var promise = $.getJSON("{{ URL::route('lingkungan.get.polygon.json') }}");

        promise.done(function(coordinates){
            for (var key in coordinates) {
                var lat_lng = coordinates[key];
                polygonCoords.push(new google.maps.LatLng(lat_lng.lat, lat_lng.lng));
            }

            if(polygonCoords.length > 0) {
                var polygon = new google.maps.Polygon({
                    paths: polygonCoords
                });
                polygon.setMap(map);
            }
        });

        // get marker data
        var promise = $.getJSON("{{ URL::route('lokasis.get.all.markers') }}");
        promise.done(function(lokasis){
            placeMarker(lokasis);
        });
    }

    google.maps.event.addDomListener(window, 'load', initialize);

    $(function() {

        $('#frmFilter').on('submit', function(event) {
            event.preventDefault();

            deleteOverlays();

            // Ajax request based on filter value
            var promise = $.ajax({
                url: "{{ URL::route('lokasis.get.all.markers') }}",
                type: 'get',
                data: $(this).serialize()
            });

            promise.done(function(lokasis) {
                console.log(lokasis);

                placeMarker(lokasis);
            });
        });

    });
</script>
@stop
